<template>
  <div id="menu-edit">
    <el-container>
      <el-main style="height: 510px">
        <el-form label-width="120px">
          <el-form-item style="width: 350px" label="上级菜单">
            <el-input disabled v-model="choseItem.name" placeholder="请选择上级菜单"></el-input>
          </el-form-item>
          <el-form-item label="上级菜单选择器">
            <union-select ref="select" @choseItem="choseData" parent-id="parentId" :url="unionButton.target"
                          :permission="unionButton.id"
                          init-parent-id="0"></union-select>
          </el-form-item>
          <el-form-item style="width: 350px" label="菜单名">
            <el-input v-model="form.name" placeholder="请输入菜单名"></el-input>
          </el-form-item>
          <el-form-item style="width: 350px" label="排序">
            <el-input v-model="form.sort" placeholder="请输入排序号"></el-input>
          </el-form-item>
          <el-form-item style="width: 350px" label="接口地址">
            <el-input v-model="form.target" placeholder="请输入接口地址"></el-input>
          </el-form-item>
          <el-form-item style="width: 350px" label="接口页面地址">
            <el-input v-model="form.pageRefresh" placeholder="请输入页面地址"></el-input>
          </el-form-item>
          <el-form-item label="图标" inline>
            <el-button disabled type="primary" :icon="form.icon" circle></el-button>
            <el-button @click="openIcon" size="small" icon="el-icon-picture-outline-round" type="primary">选择</el-button>
          </el-form-item>
          <el-form-item style="width: 450px" label="页面归属">
            <el-radio v-model="form.isAdmin" label="0">业务页面</el-radio>
            <el-radio v-model="form.isAdmin" label="1">管理页面</el-radio>
            <el-radio v-model="form.isAdmin" label="2">所有页面</el-radio>
          </el-form-item>
          <el-form-item style="width: 350px" label="是否为页面">
            <el-switch
              v-model="form.isPage"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
              active-text="是"
              inactive-text="否">
            </el-switch>
          </el-form-item>
          <el-form-item v-show="form.isPage == 0" style="width: 450px" label="按钮类型">
            <el-select v-model="form.buttonTypeId" placeholder="请选择按钮类型">
              <el-option v-for="(item,index) of buttonData.buttonTypes" :key="index" :value="item.id"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="form.isPage == 0" style="width: 450px" label="按钮类型">
            <el-select v-model="form.buttonColorId" placeholder="请选择按钮颜色">
              <el-option v-for="(item,index) of buttonData.buttonColors" :key="index" :value="item.id"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width: 350px" label="是否可见">
            <el-switch
              v-model="form.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
              active-text="可见"
              inactive-text="不可见">
            </el-switch>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer height="100%">
        <el-divider></el-divider>
        <el-form label-width="120px">
          <el-form-item label="">
            <el-button @click="submit" type="primary" size="small" icon="el-icon-s-promotion">提交</el-button>
          </el-form-item>
        </el-form>
      </el-footer>
    </el-container>
    <icon-select v-show="iconSelect.show" @getIconAddr="choseIcon"></icon-select>
  </div>

</template>

<script>
  import unionSelect from '../../../common/union-select'
  import iconSelect from '../../../common/icon-select'

  export default {
    components: {
      unionSelect,
      iconSelect
    },
    name: "menu-edit",
    data() {
      return {
        iconSelect: {
          show: false
        },
        buttonData: {
          buttonTypes: [],
          buttonColors: [],
        },
        choseItem: {
          id: '0',
          parentId: '0',
          parentIds: '',
          name: ''
        },
        defaultForm: {
          id: '',
          parentId: '',
          parentIds: '',
          name: '',
          sort: '',
          target: '',
          pageRefresh: '',
          icon: '',
          isAdmin: '0',
          isPage: '1',
          isShow: '1',
          buttonTypeId: '',
          buttonColorId: '',
        },
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        if (this.common.isNotEmpty(this.form.parentId)) {
          this.choseItem.id = this.form.parentId
        }
        if (this.common.isNotEmpty(this.form.parentName)) {
          this.choseItem.name = this.form.parentName
        }
        this.initButtonData(this.button.children[0], 'bttype', 'buttonTypes')
        this.initButtonData(this.button.children[1], 'btcolor', 'buttonColors')
      },
      submit() {
        if (!this.validate()) {
          return
        }
        this.common.request({
          url: this.button.target,
          param: this.form,
          permission: this.button.id,
          success: res => {
            if (res.code == 1) {
              this.$emit('save')
            }
          }
        })
      },
      validate() {
        this.form.parentId = this.choseItem.id
        if (this.common.isEmpty(this.form.parentId)) {
          this.form.parentId = '0'
        }
        this.form.parentIds = this.choseItem.parentIds + "," + this.choseItem.id
        if (this.form.parentIds == ',0') {
          this.form.parentIds = '0'
        }
        if (this.validateItem(this.form.parentId, '父级菜单') &&
          this.validateItem(this.form.name, '菜单名称') &&
          this.validateItem(this.form.sort, '排序号') &&
          this.validateItem(this.form.isAdmin, '页面归属') &&
          this.validateItem(this.form.isPage, '类型') &&
          this.validateItem(this.form.isShow, '是否显示')) {
          return true
        } else {
          return false
        }
      },
      validateItem(item, msg) {
        if (this.common.isEmpty(item)) {
          this.common.layMsgAutoClose({type: 'e', msg: msg + '不能为空'})
          return false
        } else {
          return true
        }
      },
      choseData(data) {
        this.choseItem = data
      },
      openIcon() {
        let that = this
        this.$set(that.iconSelect, 'show', true)
        that.common.openBox({
          id: '#icon-select',
          title: '图标选择器',
          callback: () => {
            this.$set(that.iconSelect, 'show', false)
          },
        })
      },
      choseIcon(icon) {
        this.form.icon = icon
        this.common.closeBox('#icon-select')
        this.$set(this.iconSelect, 'show', false)
      },
      initButtonData(button, parentCode, target) {
        this.common.request({
          url: button.target,
          param: {
            parentCode: parentCode
          },
          permission: button.id,
          loading: false,
          success: res => {
            if (res.code == 1) {
              this.$set(this.buttonData, target, res.data.rows)
            }
          }
        })
      }
    },
    props: {
      unionButton: {
        type: Object
      },
      button: {
        type: Object
      },
      form: {
        type: Object,
        default() {
          return {
            id: '',
            parentId: '',
            parentIds: '',
            name: '',
            sort: '',
            target: '',
            pageRefresh: '',
            icon: '',
            isAdmin: '0',
            isPage: '1',
            isShow: '1',
            buttonTypeId: '',
            buttonColorId: '',
          }
        }
      }
    },

  }
</script>

<style scoped>

</style>
